<template>
  <div>
    <h1>医疗管理系统</h1>
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="210px" style="background-color: rgb(238, 241, 246)">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-menu-item index="1" @click="dockerList()">
            <i class="el-icon-menu"></i>
            <span slot="title">医护人员管理</span>
          </el-menu-item>
          <el-menu-item
            index="2"           
            @click="patientList()"
          >
            <i class="el-icon-menu"></i>
            <span slot="title">住院人员管理</span>
          </el-menu-item>
          <el-menu-item
            index="3"            
            @click="checkOutList()"
          >
            <i class="el-icon-document"></i>
            <span slot="title">出院人员管理</span>
          </el-menu-item>
          <el-menu-item
            index="4"            
            @click="machineList()"
          >
            <i class="el-icon-setting"></i>
            <span slot="title">医疗器材管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="!token" @click.native="Login()"
                >登录</el-dropdown-item
              >
              <el-dropdown-item
                @click.native="addAdmin()"
                v-if="token && token.type == 'admin'"
                >新增管理员</el-dropdown-item
              >
              <el-dropdown-item v-if="token" @click.native="update()"
                >修改用户</el-dropdown-item
              >
              <el-dropdown-item v-if="token" @click.native="loginOut()"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{
            token == null
              ? "请先登录"
              : token.type == "admin"
              ? "欢迎您尊敬的管理员 " + token.name
              : "欢迎您尊敬的用户 " + token.name
          }}</span>
        </el-header>

        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
    <manager-add-or-update
      v-if="managerAddOrUpdateVisable"
      ref="managerAddOrUpdate"
      @refreshData="refresh()"
    ></manager-add-or-update>
  
  </div>
</template>



<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>

<script>
import cookie from "js-cookie";
import ManagerAddOrUpdate from "../views/manager-add-or-update.vue";
export default {
  components: {ManagerAddOrUpdate },
  data() {
    return {
      isCollapse: true,
      token: null,
      readerAddOrUpdateVisable: false,
      managerAddOrUpdateVisable: false,
    };
  },

  created() {
    this.dockerList();
    this.token = cookie.get("token") ? JSON.parse(cookie.get("token")) : null;
    if (this.token == null) {
      this.$router.push({ name: "login" });
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    loginOut() {
      cookie.remove("token");
      this.token == null;
      this.$router.go(0);
    },
    dockerList() {
      this.$router.push({ name: "dockerList" });
    },
    Login() {
      if (this.token == null) {
        this.$router.push({ name: "login" });
      }
    },
    patientList() {
      this.$router.push({ name: "patientList" });
    },
    checkOutList() {
      this.$router.push({ name: "checkOutList" });
    },
    machineList() {
      this.$router.push({ name: "machineList" });
    },
    update() {      
        this.managerAddOrUpdateVisable = true;
        this.$nextTick(() => {
          this.$refs.managerAddOrUpdate.init(this.token.id);
        });
      
    },
    addAdmin() {
      this.managerAddOrUpdateVisable = true;
      this.$nextTick(() => {
        this.$refs.managerAddOrUpdate.init();
      });
    },
    refresh(){
      console.log("refresh")
       this.token = cookie.get("token") ? JSON.parse(cookie.get("token")) : null;
    }
  },
};
</script>